<template>
  <div class="studentHome">
    <div class="studentHome-left">
      <div>
        <div>近期成绩</div>
        <div>
          <Echart :option="option" :width="'600px'" :height="'300px'" />
        </div>
      </div>
      <div class="studentHome-left-table">
        <el-table :data="tableDataMain" border style="width: 60%">
          <el-table-column prop="homeworkName" label="作业名称" width="130" />
          <el-table-column prop="achievement" label="分数" width="100" />
          <el-table-column prop="state" label="作业是否完成" />
        </el-table>
      </div>
    </div>
    <div class="studentHome-right">
      <div>
        <div>待完成作业</div>
        <div class="studentHome-right-main">
          <div v-for="(item, index) in pendingJobArr" :key="index">
            <PendingHomework :data="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue"
import Echart from "../../components/echart/Echart.vue"
import {Student} from "../../api"
import {Job} from "../../interface"
import PendingHomework from "../../components/PendingHomework.vue"
const option: echarts.EChartsOption | undefined | any = ref()
const tableDataMain = ref()
const pendingJobArr = ref()
onMounted(() => {
  init()
})
const init = async () => {
  const res = await Student.getJobListByStudentId({studentId: 111})
  const optionValueData = res.data.data.dataArr.filter((item: Job) => item.state == 1)
  pendingJobArr.value = res.data.data.dataArr.filter((item: Job) => item.state == 0)
  option.value = {
    xAxis: {
      type: "category",
      data: optionValueData.map((item: Job) => item.Homework!.name)
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: optionValueData.map((item: Job) => item.achievement),
        type: "line",
        smooth: true
      }
    ]
  }
  tableDataMain.value = res.data.data.dataArr.map((item: Job) => ({
    homeworkName: item.Homework!.name,
    achievement: item.achievement,
    state: item.state == 1 ? "完成" : "未完成"
  }))
}
</script>
<style lang="scss" scoped>
.studentHome {
  display: flex;
  padding: 50px;
  &-left {
    flex-basis: 50%;
    border-right: 1px solid #ccc;
    text-align: left;
    line-height: 40px;
    font-size: 18px;
    &-table {
      padding-left: 50px;
    }
  }
  &-right {
    flex-basis: 50%;
    &-main {
      padding: 50px 50px 0;
    }
  }
}
</style>
